<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<title></title>
</head>
<body>
	<div id="app">
		<el-table
			ref="singleTable"
			:data="tableData"
			highlight-current-row
			   style="width: 100%"
			@selection-change="handleSelectionChange">
			<el-table-column
			  type="selection"
			  width="50">
			</el-table-column>
			<el-table-column
			prop="id"
			label="编号"
			width="120">
			</el-table-column>
			<el-table-column
			prop="name"
			  label="姓名"
			  width="120">
			</el-table-column>
			<el-table-column
			 prop="sex"
			  label="性别"
			  width="120">
			</el-table-column>
			 <el-table-column label="操作">
				 <template slot="header" slot-scope="slot">
					 操作
					 <el-button size="mini" type="success">新增</el-button>
					 <el-button size="mini" type="danger" @click="deleteChoosed">删除所选</el-button>
				 </template>
			      <template slot-scope="scope">
			        <el-button
			          size="mini"
			          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
			        <el-button
			          size="mini"
			          type="danger"
			          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
			      </template>
			    </el-table-column>
		</el-table>
	</div>
	<script>
		new Vue({
			el:'#app',
			data:{
				tableData:[
					{
										"id":"101",
										"name":"张三",
										"password":"123",
										"sex":"男"
										},{
										"id":"102",
										"name":"李思",
										"password":"456",
										"sex":"女"
										},{
										"id":"103",
										"name":"王五",
										"password":"789",
										"sex":"男"
										},{
										"id":"104",
										"name":"赵柳",
										"password":"666",
										"sex":"女"
										}
					],
				multipleSelection:[],
			},
			methods:{
				handleSelectionChange(val){
					this.multipleSelection=val;
				},
				handleDelete(index,row){
					console.log(row)
					  this.$confirm(`此操作将永久删除该用户${row.name}, 是否继续?`, '提示', {
					          confirmButtonText: '确定',
					          cancelButtonText: '取消',
					          type: 'warning'
					        }).then(() => {
								this.tableData.splice(index,1);
					          this.$message({
					            type: 'success',
					            message: '删除成功!'
					          });
					        }).catch(() => {
					          this.$message({
					            type: 'info',
					            message: '已取消删除'
					          });          
					        });
				},
				deleteChoosed(){
					this.tableData=this.tableData.
					filter(x=>!this.multipleSelection.some(y=>y==x));
				}
			}
		})
	</script>
	
</body>
</html>
